header {
    flex: 0.9;
    display: flex;
    align-items: center;
    /*不会换行*/
    flex-wrap: nowrap;
    z-index:10;
    /*position: fixed;*/
    /*不会受到页面滚动的影响 *将位置设为"fixed"可使元素相对于视窗进行定位*!*/
    width: 100%;
    height: 9%;
    /*vh表示视口高度的百分比，因此100vh将使元素的高度等于浏览器窗口高度（视口）*/
    background: rgba(64, 158, 255, 0.90);
}

header img {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    width: 16%;
    height: 85%;
    /*将图像宽度设置为其父元素（<header>）宽度的20％*/
    /*vw表示相对于视口宽度的百分比，即1vw等于视口宽度的1%.*/
    /*%表示相对于父元素的百分比，即1%等于父元素宽度的1%。*/
    margin-left: 3vw;
    margin-right: 2.5vw;
}

header .brand {
    font-family: 黑体;
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    font-size: 3.8vh;
    letter-spacing: 0.1vw;
    /*用于控制字符间的空白间隔*/
    color: #ffffff;
    margin-right: 25%;
}

header .head_button{
    min-height: 100%;
    display: flex;
    /*不会换行*/
    flex-wrap: nowrap;
    justify-content: center; /* for horizontal centering */
    align-items: center; /* for vertical centering */
    font-family: 宋体;
    font-size: 1.0em;
    color:white;
    margin-right: 1.7%;
    margin-left: 1.7%;
    text-decoration: none; /* remove underline by default */
    transition: background-color 0.5s ease;
}

header .head_button p{
    margin-left: 0.5vw;
}

header .head_button:hover {
    text-decoration: underline; /* underline on hover */
    cursor: pointer; /* cursor changes to pointer on hover */
    background: rgba(60, 158, 255, 0.9);
}